<template>
	<view>
		<view>
			<uni-popup ref="popup" @change="change">
				<view class="popup-content">
					<view class="pop-item" @click="useWechatAvater">
						<text>用微信头像</text>
						<image :src="avaterUrl" mode=""></image>

					</view>
					<view class="pop-item" @click="getAlbumImg('album')">从相册选择</view>
					<view class="pop-item" @click="getAlbumImg('camera')">拍照</view>
					<view class="cancel" @click="cancel">取消</view>

				</view>
			</uni-popup>
		</view>

	</view>
</template>


<script>
	import requestHttp from '@/providers/essential/httpService.js'
	import api from '@/providers/API/api.js'
	export default {
		props: ['type', 'status', 'avaterUrl'],

		watch: {
			status: { //要监听的属性名
				handler(newValue, oldValue) {
					//监听到数据变化执行方法
					console.log(newValue, oldValue, 'oldValue')
					if (this.$props.status === true) {
						this.$refs.popup.open(this.$props.type)
					}


				},

				deep: true // 深度监听父组件传过来对象变化

			},
		},
		data() {
			return {
				avaterUrl: 'http://jiaoyukehu.oss-cn-beijing.aliyuncs.com/static/my/avater.png'
			}
		},
		methods: {
			cancel() {
				this.$refs.popup.close(this.$props.type)
			},

			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
				if (e.show == false) {
					this.$emit('tabtap', e.show)
				}
			},
			toggle(type) {
				this.type = type
			},
			useWechatAvater() {
				this.cancel()
			},

			// 修改用户头像
			updateAvater(avaterUrl) {
				let url = api.updateAvatar
				console.log(api.updateAvatar, 'login')
				let data = {
					avatarFile: avaterUrl
				}
				requestHttp.postData(url, data).then((res) => {
					console.log(res, 'res')
					if (res) {
						if (res.code == 200) {

						} else if (res.msg) {
							uni.showToast({
								title: res.msg, //显示的文字 
							})
						}
					} else {
						uni.showToast({
							title: '系统错误', //显示的文字 
						})
					}
				})
			},

			getAlbumImg(type) {
				let that = this
				uni.chooseImage({
					count: 6, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: [type], //从相册选择
					success: function(res) {
						this.avaterUrl = res.tempFilePaths[0]
						console.log(JSON.stringify(res.tempFilePaths[0]));
						that.updateAvater(JSON.stringify(res.tempFilePaths[0]))
					}
				})
			},

		}

	}
</script>

<style lang="scss">
	.box {
		@include flex;
	}

	.popup-content {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		// position: relative;
		// background-color: rgba(255, 255, 255, 0.6);


		// justify-content: center;
		// padding: 15px;
		width: 100%;
		// height: 100%;
		padding-bottom: 40rpx;
		background-color: #fff;

		.pop-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 20rpx;
		}

		image {
			width: 40rpx;
			height: 40rpx;
			padding-top: 10rpx;
		}

		.cancel {
			text-align: center;
			width: 100%;
			border-top: 20rpx solid #ccc;
			padding: 40rpx;
		}

	}


	.text {
		font-size: 24rpx;
		color: #333;
	}
</style>
